<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">

	<title>服务器组</title>

	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

	<link rel="stylesheet" href="${ctxPath}/lib/layui/css/layui.css" media="all">
	<link rel="stylesheet" href="${ctxPath}/css/public.css" media="all">

</head>

<body>
	<div class="layuimini-container">
		<div class="layuimini-main">
			<form class="layui-form layui-form-pane" action="">
				<div class="layui-form-item">
					<div class="layui-inline">
						<label class="layui-form-label">单行输入框</label>
						<div class="layui-input-inline">
							<select name="pid">
								<option value="">所属父组</option>
							</select>
						</div>
					</div>

					<div class="layui-inline">
						<label class="layui-form-label">单行输入框</label>
						<div class="layui-input-inline">
							<input type="text" name="groupName" placeholder="组名称" autocomplete="off" class="layui-input">
						</div>
					</div>
					
					<div class="layui-inline">
						<button type="submit" class="layui-btn layui-btn-primary" lay-submit lay-filter="data-search-btn">
							<i class="layui-icon"></i> 搜 索
						</button>
					</div>
				</div>
			</form>

			<!-- 表格头部功能区 -->
			<script type="text/html" id="toolbarDemo">
	            <div class="layui-btn-container">
	                <button class="layui-btn layui-btn-sm layui-bg-blue" lay-event="add"> 添加 </button>
	                <button class="layui-btn layui-btn-sm layui-bg-orange" lay-event="batchDelete"> 批量删除 </button>
	                <button class="layui-btn layui-btn-sm layui-bg-red" lay-event="deleteAll"> 全部删除 </button>
	            </div>
	        </script>
			
			<!-- 数据表格 -->
			<table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>

			<!-- 表格右侧功能区 -->
			<script type="text/html" id="currentTableBar">
				<a class="layui-btn layui-btn-xs layui-btn-primary" lay-event="edit">编辑</a>
				<a class="layui-btn layui-btn-xs layui-bg-red" lay-event="delete">删除</a>
	        </script>

			<!-- 状态 -->
			<script type="text/html" id="statusTpl">
				<input type="checkbox" name="status" value="{{d.id}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="statusTpl" {{ d.status == 1 ? 'checked' : '' }}>
			</script>

		</div>
	</div>

	<script src="${ctxPath}/lib/layui/layui.js" charset="utf-8"></script>
	<script src="${ctxPath}/js/core.util.js" charset="utf-8"></script>
	<script src="${ctxPath}/js/lay-config.js?v=2.0.0" charset="utf-8"></script>

	<script type="text/javascript">
		layui.use(['form', 'table', 'notice'], function () {
			var $ = layui.jquery, form = layui.form, table = layui.table, notice = layui.notice;

			table.render({
				elem: '#currentTableId',
				url: '/busi/website/serverGroup/list',
				toolbar: '#toolbarDemo',
				cols: [[
					{type: "checkbox", width: 50},
					{field: 'id', width: 200, title: 'ID', sort: true},
					{field: 'groupName', title: '组名'},
					{field: 'pid', title: '父组信息', sort: true},
					
					{field: 'remark', title: '备注'},
					{field: 'status', width: 95, title: '状态', sort: true, templet: '#statusTpl'},
					{field: 'createTime', width: 168, title: '入库时间', align: "center", templet: "<div>{{layui.util.toDateString(d.createTime, 'yyyy-MM-dd HH:mm:ss')}}</div>"},
					{field: 'updateTime', width: 168, title: '修改时间', align: "center", templet: "<div>{{layui.util.toDateString(d.updateTime, 'yyyy-MM-dd HH:mm:ss')}}</div>"},
					{title: '操作', width: 150, toolbar: '#currentTableBar', align: "center", fixed: 'right', }
				]],
				limits: [50, 100, 200, 300, 500, 700, 1000, 1500, 5000, 10000],
				limit: 50,
				page: true,
				skin: 'row|line',
			});

			// 监听搜索操作
			form.on('submit(data-search-btn)', function (data) {
				//执行搜索重载
				table.reload('currentTableId', {
					page: {curr: 1},
					where: {
						groupName: data.field.groupName,
						pid: data.field.pid,
					}
				}, 'data');
				return false;
			});

			//	监听【 状态 】操作
			form.on('switch(statusTpl)', function (data) {

				let dataInfo = {"id": data.value, "status": data.elem.checked}
				sendAjax("/busi/website/serverGroup/status", dataInfo, function (rest) {
					if (rest.code == 0) {
						notice.msg(rest.msg, {icon: 1});
					} else {
						notice.msg(rest.msg, {icon: 2});
					}
					table.reload('currentTableId'); // 刷新表格
				},"GET");
			});

			// toolbar监听事件	----- 头部按钮
			table.on('toolbar(currentTableFilter)', function (obj) {
				if (obj.event === 'add') {  // 监听添加操作
					var index = layer.open({
						title: '添加新蜘蛛',
						type: 2,
						shade: 0.2,
						maxmin: true,
						shadeClose: true,
						area: ['50%', '60%'],
						content: '/busi/spider/form.html',
						end: function () { //子页面销毁时回调的方法
							table.reload('currentTableId'); // 刷新表格
						}
					});
				} else if (obj.event === 'batchDelete') {  // 监听删除操作
					let data = table.checkStatus('currentTableId').data;
					if (data.length == 0) {
						notice.msg('请选择要操作的数据', {icon: 2});
						return false;
					} else {
						layer.confirm('确定删除所有选择的数据？', {btn: ['确定', '取消']}, function (index) {
							let ids = "";
							for (var i = 0; i < data.length; i++) {
								ids += data[i].id + ","
							}
							sendAjax("/busi/website/serverGroup/batchDelete", ids, function (rest) {
								notice.msg(rest.msg, {icon: 1});
								layer.close(index);
								table.reload('currentTableId');
							});
						}, function () {
							// 取消动作
						});
					}
				} else if (obj.event === 'deleteAll') {  // 监听删除操作
					layer.confirm('确定删除所有选择的数据？', {btn: ['确定', '取消']}, function (index) {
						sendAjax("/busi/website/serverGroup/deleteAll", null, function (rest) {
							notice.msg(rest.msg, {icon: 1});
							layer.close(index);
							table.reload('currentTableId');
						});
					}, function () {
						// 取消动作
					});
				}
			});

			// 表格 右侧操作按钮
			table.on('tool(currentTableFilter)', function (obj) {
				var data = obj.data;
				if (obj.event === 'edit') {
					var index = layer.open({
						title: '修改蜘蛛',
						type: 2,
						shade: 0.2,
						maxmin: true,
						shadeClose: true,
						area: ['50%', '60%'],
						content: '/busi/spider/form.html?id=' + data.id,
						end: function () { //子页面销毁时回调的方法
							table.reload('currentTableId'); // 刷新表格
						}
					});
					return false;
				} else if (obj.event === 'delete') {
					layer.confirm('确定删除此数据吗？', {btn: ['确定', '取消']}, function (index) {
						sendAjax("/busi/website/serverGroup/delete?id=" + data.id, null, function (rest) {
							notice.msg(rest.msg, {icon: 1});
							layer.close(index);
							table.reload('currentTableId');
						});
					}, function () {
						// 取消动作
					});
				}
			});
			
		});
	</script>
</body>

</html>